<template>
    <div>
        <mt-header title="麻将">
        </mt-header>
        <div class="xy-container">
            <div class="xy-card">
                <!--<el-button type="info" @click="deck.pile.shuffle" size="mini">洗牌</el-button>-->
                <!--<el-button type="info" @click="deck.deal(13)" size="mini">发牌</el-button>-->
                <el-button type="info" @click="deck.start()" size="mini">开局</el-button>
                <xy-v-space height="0.5em"></xy-v-space>
                <div class="xy-card">
                    剩余牌堆
                    <template v-for="tile in deck.pile.tiles">
                        <el-button :type="switchType(tile)" size="mini">{{tile.label}}</el-button>
                    </template>
                </div>
                <div class="xy-card">
                    弃牌堆
                    <template v-for="tile in deck.trash">
                        <el-button :type="switchType(tile)" size="mini">{{tile.label}}</el-button>
                    </template>
                </div>
                <div class="xy-card">
                    <div>当前打出牌
                        <el-button :type="switchType(deck.discardingTile)" size="mini">{{deck.discardingTile.label}}
                        </el-button>
                    </div>
                    <div>响应时间
                        <el-progress :percentage="Math.round(100*deck.countdown/deck.countdownMax)"
                                     :text-inside="true"></el-progress>
                    </div>

                </div>
                <!--<el-button type="info" @click="$router.push({name:'contact-list'})">联系人</el-button>-->
                <!--<el-button type="info" @click="$router.push({name:'contract-list'})">合同</el-button>-->
                <!--<el-button type="info" @click="$router.push({name:'chance-list'})">机会</el-button>-->
            </div>
            <template v-for="(gamer,order) in deck.gamers">
                <xy-v-space height="0.5em"></xy-v-space>
                <div class="xy-card"><i v-if="order===deck.currentIndex" class="el-icon-check"></i>{{gamersLabel[order]}}
                    <template v-if="order===deck.currentIndex">
                        <!--<el-button type="info" @click="gamer.draw(deck.pile)" size="mini">摸牌</el-button>-->
                        <el-button :type="switchType(gamer.drawingTile)" size="mini" @click="gamer.discardDraw(deck)">
                            {{gamer.drawingTile.label}}
                        </el-button>
                    </template>
                    <template v-for="checkType in gamer.checked">
                        <el-button type="info" @click="gamer.reaction(checkType,deck)" size="mini">{{checkType}}</el-button>
                    </template>
                    <div class="xy-card">
                        <template v-for="(tile,index) in gamer.tiles">
                            <el-button :type="switchType(tile)" size="mini" @click="gamer.discard(index,deck)">
                                {{tile.label}}
                            </el-button>
                        </template>
                        <div class="xy-card">
                            <template v-for="sequence in gamer.otherTiles">
                                <template v-for="tile in sequence">
                                    <el-button :type="switchType(tile)" size="mini">
                                        {{tile.label}}
                                    </el-button>
                                </template>
                            </template>
                        </div>
                    </div>
                </div>
            </template>

        </div>
    </div>
</template>
<script>
    import {Tile, Pile, Gamer, Deck, Status, CheckDiscardType} from 'game/majiang/index';
    export default {
        components: {},
        data(){
            return {
                playing: false,
                deck: new Deck(),
                gamersLabel: ['东', '北', '西', '南']
            }
        },
        methods: {
            switchType(tile){
                if (tile.type === '条') {
                    return 'success';
                } else if (tile.type === '筒') {
                    return 'warning';
                } else if (tile.type === '万') {
                    return 'danger';
                }
            }
        },
        mounted(){
            this.deck = new Deck();
        }
    };
</script>